<template>
	<div class="strut-div">
		<div class="problem-l-1 clear-float">
			<div>
				<h3>今日总发现</h3>
				<p>2284</p>
			</div>
			<div>
				<h3>主动报送</h3>
				<p>
					<span>1369</span>
					<span>62%</span>
				</p>
			</div>
			<div>
				<h3>被动受理</h3>
				<p>
					<span>907</span>
					<span>38%</span>
				</p>
			</div>
		</div>
		<div class="problem-l-2 clear-float">
			<div>
				<h4>历史最高</h4>
				<p>15832</p>
			</div>
			<div>
				<h4>微信关注</h4>
				<p>15832</p>
			</div>
			<div>
				<h4>群众满意度</h4>
				<p>94.5%</p>
			</div>
			<div>
				<h4>志愿者</h4>
				<p>2360</p>
			</div>
		</div>
		<div class="problem-l-3 clear-float">
			<div>
				<div>
					<h4>区域报送</h4>
					<p>
						<span>757</span>
						<span>39%</span>
					</p>
				</div>
				<div>
					<h4>城管报送</h4>
					<p>
						<span>133</span>
						<span>21%</span>
					</p>
				</div>
				<div>
					<h4>12345热线</h4>
					<p>
						<span>757</span>
						<span>39%</span>
					</p>
				</div>
				<div>
					<h4>微信受理</h4>
					<p>
						<span>133</span>
						<span>23%</span>
					</p>
				</div>
			</div>
			<div>
				<div>
					<h4>志愿者报送</h4>
					<p>
						<span>7</span>
						<span>1%</span>
					</p>
				</div>
				<div>
					<h4>民情平台</h4>
					<p>
						<span>7</span>
						<span>1%</span>
					</p>
				</div>
				<div>
					<h4>市民云受理</h4>
					<p>
						<span>10</span>
						<span>1%</span>
					</p>
				</div>
				<div>
					<h4>其他受理</h4>
					<p>
						<span>7</span>
						<span>1%</span>
					</p>
				</div>
			</div>
		</div>

		<div class="problem-l-4 clear-float">
			<div>
				<h4>语音排队数</h4>
				<p>0</p>
			</div>
			<div>
				<h4>语音接通率</h4>
				<p>94 <span>%</span> </p>
			</div>
			<div>
				<h4>微信排队数</h4>
				<p>0</p>
			</div>
			<div>
				<h4>微信接通率</h4>
				<p>100 <span>%</span> </p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		
	}
</script>

<style scoped lang="scss" type="text/scss">
	.problem-l-1 {
		border-bottom: 1px solid #143761;
		>div {
			float: left;
			width: 33.1%;
			height: 86px;
			text-align: center;
			margin-top: 20px;
			margin-bottom: 20px;
			position: relative;
			&:nth-child(2) {
				border: 1px solid #143761;
				border-top: none;
				border-bottom: none;
			}
			&:nth-child(1) > p {
				font-size: 48px;
				line-height: 38px;
			}
			
			> h3 {
				font-size: 20px;
				margin: 0;
				color: #E9F4FF;
				font-weight: normal;
			}
			> p {
				color: #3FECFF;
				width: 100%;
				margin: 0;
				position: absolute;
				bottom: 0px;
				line-height: 1em;
				>span:nth-child(1) {
					font-size: 28px;
				}
				>span:nth-child(2) {
					font-size: 20px;
					color: #FBCC13;
				}
			}
		}
	}
	
	.problem-l-2 {
		border-bottom: 1px solid #143761;
		>div {
			float: left;
			width: 25%;
			text-align: center;
			height: 84px;
			> h4{
				font-size: 14px;
				color: #E9F4FF;
				margin: 0;
				margin-top: 17px;
				
			}
			> p{
				color: #96E131;
				margin: 0;
				font-size: 20px;
				margin-top: 8px;
			}
		}
	}
	
	.problem-l-3 {
		border-bottom: 1px solid #143761;
		>div {
			width: 49.5%;
			float: left;
			margin-top: 20px;
			margin-bottom: 20px;
			&:nth-child(1) {
				border-right: 1px solid #143761;
			}
			> div {
				float: left;
				width: 50%;
				height: 60px;
				>h4 {
					font-size: 14px;
					color: #2B92F9;
					margin: 0;
					text-align: left;
					margin-left: 14px;
				}
				>p {
					margin: 0;
					margin-top: 5px;
					margin-left: 14px;
					>span:nth-child(1) {
						font-size: 14px;
						color: #3FECFF;
						line-height: 28px;
					}
					>span:nth-child(2) {
						font-size: 20px;
						color: #FBCC13;
						float: right;
						margin-right: 5px;
					}
				}
				
			}
		}
	}
	
	.problem-l-4 {
		height: 154px;
		>div {
			float: left;
			margin-left: 5px;
			margin-right: 6px;
			margin-top: 20px;
			width:98px;
			height:110px;
			background:rgba(22,188,144,0.1);
			box-shadow:0px 0px 2px 3px rgba(13,175,144,0.26);
			border-radius:10px;
			
			>h4 {
				font-size: 14px;
				color: #E9F4FF;
				text-align: center;
			}
			>p {
				font-size: 30px;
				color: #FBCC13;
				text-align: right;
				margin: 20px 10px 0px 10px;
				>span {
					font-size: 14px;
				}
			}
		}
	}
</style>
